<?php

extract($data);
?>
<style type="text/css">
    body{padding: 0px;margin: 0px;}
    *{font-family:verdana;font-size:8.5pt;}
    .banner-wrapper{
        width: <?= $width?>px;
        height: <?= $height?>px;
        padding: 0px;
        margin: 0px;
        position: relative;
        overflow:hidden;
    }
    .b1{border: solid red 3px;}
    .b2{border: solid blue 1px;}
    .label-title{
        top:0px;
        right:5px;
        position:absolute;
        padding:2px 5px 2px 5px;
        color:#FFFFFF;
        border-right:solid grey 2px;
        border-bottom:solid grey 2px;
        border-left:solid grey 2px;
        background-color:black;
        z-index:10;
    }
    .label-title a{color:#FFFFFF; text-decoration:none;}
    .curb{
        border: 1px solid grey;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        position: relative;
        behavior: url('pie/PIE.php');
    }
    .inner{width: <?= $width?>px; height: <?= $height?>px; overflow:hidden;}
    .show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
    .nav{
        display:block;
        float: right;
        margin-right: 5px;
        margin-top: 2px;
        padding: 2px 3px 2px 3px;
        color: white;
        text-decoration:none;
        border: 1px solid grey;
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        -o-border-radius: 12px;
        position: relative;
        behavior: url('pie/PIE.php'); 
    }
    .active{ background-color:white; color:black; }
    .nav-wrapper{
        position: absolute;
/*        top: 80%;*/
        bottom:0px;
        left: 0px;
        height: 25px;
        width:100%;
        border-top: solid grey 1px;
        border-bottom: solid grey 1px;
        background-color:<?= $nav_color ?>;
        -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
    }
    .title{float:left;margin-top:6px; margin-left:8px;color:white;}
    .tool-tip{
        position:absolute;
        z-index:100;
        border:solid grey 1px;
        background-color: #8db1ff;
    }
</style>

<script type="text/javascript" src="<?= BASE_URL?>imports/js/jquery-1.6.4.min.js"></script>

<?php 
$ids = explode(',', $content);
$ctr = count($ids);
?>
    
   <div class="banner-wrapper" effect="<?= $effect?>">
        <?php foreach ($ids as $v): ?>

        <div index="<?= $v?>">
            <?php 
            $ar = explode('_', $v);
            $type = $ar[0];
            $id = $ar[1];
            ?>
            <?php if($type=='page'):?>
                <?= $attr[$type][$id]['content'] ?>
            <?php else:?>
                <img src="<?= BASE_URL.$attr[$type][$id]['location'] ?>" />
            <?php endif;?>

        </div>
        <?php endforeach; ?>
        <?php if($navigator=='show'):?>
            <span style="z-index: 100;" class="nav-wrapper">
                <?php $i=1;?>
                <?php foreach($ids as $v): ?>
                    <?php 
                    $ar = explode('_', $v);
                    $type = $ar[0];
                    $id = $ar[1];
                    ?>
                    <?= ($i==1)?'<span class="title">'.$attr[$type][$id]['title'].'</span>':''?>
                    <a href="#" index="<?= $v ?>" class="nav <?= ($i==1)?'active':'' ?>"><?= $i++ ?></a>
                <?php endforeach; ?>
            </span>
        <?php endif;?>
    </div>
<!--<span id="monitor"></span>-->
<script>
var array = new Array();  
var attr = <?= json_encode($attr)?>;
var effect = '';
var speed1 = 2000;
var speed2 = <?= $speed?>;
var loop = 1;
var interval = 1;
var z_index = <?= $ctr ?>;
var width = <?= $width?>;
var height = <?= $height?>;
$(function(){
    
    $(".banner-wrapper").ready(function(){
        effect = $(".banner-wrapper").attr('effect');
        
        
        var last = 0;
        var i = 0;
        
        switch(effect){
            case 'slide':
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    last = i*width;
                    $(this).css('left',last+'px').show();
                    
                    var x = $(this).attr('index');
                    array.push(x)
                    
                    i++;
                });
                setTimeout('animate_slide()',2000)
                break;
            default:
                $('div', ".banner-wrapper").each(function(){
                    $(this).css('position','absolute');
                    $(this).css('z-index',z_index--);
                    var x = $(this).attr('index');
                    array.push(x)
                    last = i*40;
                    i++;
                });
                
                setTimeout('animate_fade()',2000)
                break;
        }
    });
    
    $(".banner-wrapper").mouseover(function(){
    
        var span = '<span class="show-50 tool-tip">Banner created on www.Dynmo.com</span>';
        $(this).append(span);
        $(".tool-tip").css('top','0px').css('left','0px');
        $(this).mousemove(function(e){
            var x = (e.pageX - this.offsetLeft)+10;
            var y = e.pageY - this.offsetTop;
            //$(".tool-tip").css('top',y+'px').css('left',x+'px');
            //$("#monitor").html(x+', '+y);
        });
    }).mouseout(function(){
        $(".tool-tip").remove();
    });
    
});

function animate_fade(){
   cool_change(array[1]);
   $('div[index="'+array[0]+'"]').fadeOut(speed1, function(){
       
       swap();
       loop_fade();
   });
}

function loop_fade(){
    var ctr = array.length;
    $.each(array,function(i, v){
        $('div[index="'+v+'"]').css('z-index',ctr).show();
        ctr--;
    });
    
    setTimeout('animate_fade()',speed2);
}

function cool_change(index){
    $(".nav").removeClass('active');
    $('a[index="'+index+'"]').addClass('active');
    var arr = index.split('_');
    
    if(arr[0]=='image'){
        var title = attr.image[arr[1]].title;
        $(".title").html(title);
    }
}

function swap(){
    var size = parseInt(array.length);
    var temp = array[0];
    var x = 0;
    for(var i = 0; i < size; i++){
        x = array[i+1];
        array[i] = x;
    }
    array[size-1] = temp;
}

function loop_slide(){
    
    if(loop==1){
        var last = array[array.length-1];
        var i = 0;
        $.each(array,function(i, v){
            $('div[index="'+v+'"]').css('left',(width*i)+'px');
            i++;
            if(v==last){
                animate_slide();
            }
        });
    }
}

function animate_slide(){
    var last = array[array.length-1];
    $.each(array, function(i, v){
        $('div[index="'+v+'"]').animate({left:'-='+width+'px'}, speed1,function(){
            var my_left =  parseInt($(this).css('left'));
            
            if(my_left==0){cool_change(v);}
            
            if(v==last){
                swap();
                setTimeout('loop_slide()',speed2);
            }
        });
    });
}
</script>

